@import './variables.scss';
$backgroudColor: rgba(235, 235, 235, 0.6);
$borderColor: rgba(218, 218, 218, 0.6);
$fontColor: rgb(59, 59, 59);

@mixin transition-dock {
  transition-property: top, left, right, bottom, transform;
  transition-duration: .4s;
  transition-timing-function: ease-in;
}

.l-dock {
  z-index: 999;
  position: fixed;
  box-sizing: border-box;
  background-color: $backgroudColor;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 10px 10px rgba(17, 17, 17, 0.3);
  border: 1px solid rgba(218, 218, 218, 0.6);
  border-radius: 15px;
  @include transition-dock;
}

.l-dock-left, .l-dock-right {
  width: 60px;
  top: 50%;
  transform:translateY(-50%);
  padding: 20px 5px;
  .l-dock-boat {
    margin: 10px 0;
  }
}
.l-dock-left { left: 1%; }
.l-dock-right { right: 1%; }

.l-dock-bottom, .l-dock-top {
  height: 60px;
  left: 50%;
  transform:translateX(-50%);
  padding: 5px 20px;
  .l-dock-boat {
    margin: 0 10px;
  }
}
.l-dock-top { top: 2%; }
.l-dock-bottom { bottom: 2%; }

.l-dock-boat {
  color: $fontColor;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  width: 50px;
  height: 100%;
  font-size: 48px;
  line-height: 48px;
  text-align: center;
  transition: all .2s ease-in-out;
  &:hover {
    z-index: 1000;
    transition: all .2s ease-in-out;
  }
}

// animation
$tranYT: translateY(6px);
$tranYF: translateY(-6px);
$tranXT: translateX(6px);
$tranXF: translateX(-6px);
@mixin translate($tran){
  .l-dock-boat:hover {
    transform: scale(1.5,1.5) $tran;
  }
}
.l-dock-top { @include translate($tranYF) };
.l-dock-bottom { @include translate($tranYF) };
.l-dock-left { @include translate($tranXT) };
.l-dock-right { @include translate($tranXF) };

// hidden 
.l-dock-hidden {
  position: absolute;
  top: -8px;
  right: -3px;
  cursor: pointer;
}
.l-dock-hidden .l-icon {
  background-color: rgba(235, 235, 235, 1);
  color: $fontColor;
  border-radius: 50%;
}

// bank
.l-dock-bank {
  cursor: pointer;
  font-size: 3em;
  left: 1em;
  bottom: 1.5em;
  z-index: 999;
  position: fixed;
  box-sizing: border-box;
  transition: all .4s ease-in;
}